<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>商品展示</title>
    <style>
      body,
      ul,
      li,
      p,
      h3 {
        margin: 0px;
        padding: 0px;
        list-style: none;
      }
      a {
        text-decoration: none;
        color: black;
      }
      body {
        background-color: #ddd;
      }
      .main {
        width: 1226px;
        height: 700px;
        /* border: 1px solid firebrick; */
        margin: 60px auto 0px;
      }
      .main .left {
        width: 234px;
        /* height: 200px; */
        background-color: blue;
        float: left;
      }
      .main .left img {
        display: block; /* 如果img产生了空隙，那么我们就把他变成块级元素*/
      }
      .main .right {
        width: 992px;
        float: left;
      }

      .main .right ul li {
        /* border: 1px solid blue; */
        width: 234px;
        height: 300px;
        float: left;
        margin-left: 14px;
        margin-bottom: 14px;
        background-color: #fff;
      }
      .main .right ul li:last-child {
        height: 143px;
      }
      .main .right ul li:nth-last-child(2) {
        height: 143px;
      }
      .main .right ul li a {
        display: block;
        /* border: 1px solid rebeccapurple; */
        height: inherit; /*继承父元素的高*/
        text-align: center;
        padding-top: 20px;
        box-sizing: border-box;
      }
      .main .right ul li a h3 {
        font-size: 14px;
        font-weight: 400;
        padding: 0px 5px 5px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .main .right ul li a p {
        font-size: 12px;
        margin-top: 15px;
      }
      .main .right ul li a p.desc {
        color: #ddd;
      }
      .main .right ul li a p span {
        margin-right: 15px;
        color: orange;
      }
      .main .right ul li a p del {
        color: #ddd;
      }

      .clearfx::after {
        content: "";
        display: block;
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="main clearfx">
      <div class="left">
        <a href=""> <img src="./images/mi00.webp" alt="" width="234px" /></a>
      </div>
      <div class="right">
        <ul class="clearfx">
          <li>
            <a href="#">
              <img src="./images/mi01.webp" alt="" width="160px" />
              <h3>awerfeyjtftvcwevfwergqfverqgfqerdfvqarergyh</h3>
              <p class="desc">版本控制</p>
              <p><span>1099元起</span> <del>2099元起</del></p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/mi01.webp" alt="" width="160px" />
              <h3>awerfeyjtftvcwevfwergqfverqgfqerdfvqarergyh</h3>
              <p class="desc">版本控制</p>
              <p><span>1099元起</span> <del>2099元起</del></p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/mi01.webp" alt="" width="160px" />
              <h3>awerfeyjtftvcwevfwergqfverqgfqerdfvqarergyh</h3>
              <p class="desc">版本控制</p>
              <p><span>1099元起</span> <del>2099元起</del></p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/mi01.webp" alt="" width="160px" />
              <h3>awerfeyjtftvcwevfwergqfverqgfqerdfvqarergyh</h3>
              <p class="desc">版本控制</p>
              <p><span>1099元起</span> <del>2099元起</del></p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/mi01.webp" alt="" width="160px" />
              <h3>awerfeyjtftvcwevfwergqfverqgfqerdfvqarergyh</h3>
              <p class="desc">版本控制</p>
              <p><span>1099元起</span> <del>2099元起</del></p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/mi01.webp" alt="" width="160px" />
              <h3>awerfeyjtftvcwevfwergqfverqgfqerdfvqarergyh</h3>
              <p class="desc">版本控制</p>
              <p><span>1099元起</span> <del>2099元起</del></p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/mi01.webp" alt="" width="160px" />
              <h3>awerfeyjtftvcwevfwergqfverqgfqerdfvqarergyh</h3>
              <p class="desc">版本控制</p>
              <p><span>1099元起</span> <del>2099元起</del></p>
            </a>
          </li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
  </body>
</html>
